<template>
  <div>
        <div style="padding:0 20%">
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="(item,index) in SwiperArr" :key="index">
                <!-- <h3 class="medium">{{ item }}</h3> -->
                <img :src="item.thumbnail_pic_s" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div>
            <el-card class="box-card" v-for="(item,index) in topContentArr" :key="index">
                <div class=" card-onbox">
                    <div class="leftimg">
                        <img :src="item.thumbnail_pic_s" alt="">
                    </div>
                    <div class="right-content">
                        <h5>{{item.title}}</h5>
                        <p>发布日期：{{item.date}}</p>
                        <p>来源：{{item.author_name}}</p>
                        <a :href="item.url">查看详情</a>
                    </div>
                </div>
            </el-card>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
           SwiperArr:[] ,
           topContentArr : []
        }
    },
    mounted(){
            //http://v.juhe.cn/toutiao/index?type=top&key=6dae471a56835ff78747237d31b52c96
            //类型,,top(头条，默认),shehui(社会),guonei(国内),guoji(国际),yule(娱乐),tiyu(体育)junshi(军事),keji(科技),caijing(财经),shishang(时尚)
        this.getSwiperImg({key:'6dae471a56835ff78747237d31b52c96'})
    },
    methods:{
        getSwiperImg(data){
            this.$axios.post('/api','/toutiao/index',data).then(res=>{
                console.log(res.result.data.slice(0,3))
                this.SwiperArr = res.result.data.slice(0,5)
                this.topContentArr = res.result.data
            })
        }
    }
}
</script>

<style lang="scss" scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item img{
    display: block;
    width:100%;
    height: 200px;
    object-fit: cover;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .leftimg{
        width:160px;
        height: 100px;
        overflow:hidden;
      img{
            display: block;
            width:100%;
            height: 100px;
            object-fit: cover; 
      }
  }
  .right-content{
      padding-left: 24px;
      text-align: left;
      h5{
          font-size: 16px;
          line-height: 26px;
          margin: 0;
          padding: 0;
      }
      p{
          line-height: 26px;
          color: #666;
          margin: 0;
          padding: 0;
      }
      a{
          color: #409eff;
          text-decoration: none;
          margin: 0;
          padding: 0;
      }
  }
  .card-onbox {
    display: flex;
  }
  .box-card{
      width: 1000px;
      display:inline-block !important;
      margin-bottom: 20px;
  }
</style>